<script setup>
import { ref, onMounted } from 'vue'
import { myConfrim } from '@/utils'
import { useUserStore } from '@/store'
import { getRoomByClassIdApi, saveSelectBedApi } from '@/api/setAssign'

const userStore = useUserStore()

const userId = userStore.userId
const userType = userStore.userType


const tableHeight = ref(0)
onMounted(() => {
    tableHeight.value = window.innerHeight - 230
})

const tableData = ref([])

const getHasNum = (children) => {
    let num = 0
    if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
            // 名字不为空说明床位已经被选了
            if (children[i].stuName) {
                num++
            }
        }
    }
    return num
}

// 获取对应的宿舍信息
const getRoomByClassId = async () => {
    let res = await getRoomByClassIdApi({
        userId,
        userType
    })
    if (res) {
        tableData.value = res.data
    }
}

// 学生才需要获取对应的宿舍信息
if(userType !== '1'){
    getRoomByClassId()
}

// 已选择床位点击事件
const hasBtn = () => {
    ElMessage({
        message: '该床位已经有人了',
        type: 'warning'
    })
    return
}
// 选择宿舍(未选择床位点击事件)
const selectBed = async (bed) => {
    let confirm = await myConfrim('确定要选择该床位吗?')
    if (confirm) {
        let res = await saveSelectBedApi({
            bedId: bed.bedId,
            stuId: userId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            getRoomByClassId()
        }
    }
}
</script>

<template>
    <template v-if="userType === '1'">
        <div>
            管理员只负责管理学生宿舍
        </div>
    </template>
    <template v-else>
        <!-- 床位列表 -->
        <el-collapse style="overflow-y: auto;" :style="{ height: tableHeight + 'px' }">
            <el-collapse-item class="collapse-main" v-for="(item, index) in tableData" :key="index">
                <template #title class="room-title-header">
                    <span class="room-title">{{ item.roomCode }}宿舍</span>
                    <span class="room-type" v-if="item.roomType === '1'">1人间</span>
                    <span class="room-type" v-if="item.roomType === '2'">2人间</span>
                    <span class="room-type" v-if="item.roomType === '4'">4人间</span>
                    <span class="room-type" v-if="item.roomType === '6'">6人间</span>
                    <span class="room-type" v-if="item.roomType === '8'">8人间</span>
                    <span class="room-type">
                        (共{{ item.children.length }}个床位,已选{{ getHasNum(item.children) }}人)
                    </span>
                </template>
                <!-- 床位列表 -->
                <div class="bedList">
                    <div class="bed-item" v-for="(bed, bindex) in item.children" :key="bindex">

                        <div v-if="bed.stuName" class="bed-item-active">
                            <span class="num-text">
                                {{ bed.bedCode }}
                            </span>
                            <div @click="hasBtn" class="bed-main">
                                <svg-icon class="bed-svg" name="user"></svg-icon>
                                <div class="stuInfo">
                                    <div>
                                        <div>
                                            <span>姓名:</span>
                                            <span>{{ bed.stuName }}</span>
                                        </div>
                                        <div>
                                            <span>班级:</span>
                                            <span>{{ bed.className }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-else>
                            <span class="num-text">
                                {{ bed.bedCode }}
                            </span>
                            <div @click="selectBed(bed)" class="bed-main">
                                <svg-icon class="bed-svg" name="user"></svg-icon>
                                <div class="stuInfo">
                                    <div>
                                        <div style="color: #aeb5b5;">
                                            暂未选择
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </template>
</template>

<style scoped>
.build-main {
    padding-top: 0px;
}

.build-list {
    display: flex;
    flex-wrap: wrap;
}

.build-item {
    padding: 8px 30px;
    margin: 10px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-radius: 4px;
    cursor: pointer;
    background: #f8f8f8;
}

.isActive {
    background: #42b983;
    color: #fff;
}

.containers {
    margin-top: 20px;
    border: 1px solid #dcdfe6;
}

.leftAsside {
    border-right: 1px solid #dcdfe6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-item {
    padding: 8px 30px;
    margin: 10px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f8f8f8;
}

.destoryActive {
    background: #5fb878;
    border-color: #5fb878;
    color: #fff;
}

.room-title {
    padding-left: 15px;
    color: #5fb878;
    font-size: 13px;
    font-weight: 600;
    flex-grow: 1;
}

.bed-svg {
    font-size: 100px;
}

.active-num-text {
    color: #42b983;
    font-weight: 600;
}

.num-text {
    color: #8a8a8a;
}

.bed-item-active {
    background: #42b983;
    border: 1px solid #ddeff1;
    border-radius: 4px;
    height: 180px;
    width: 180px;

    display: flex;
    flex-direction: column;
}

.bed-item {
    border: 1px solid #dedede;
    border-radius: 4px;
    background-color: #f8f8f8;
    height: 180px;
    width: 180px;
    margin: 15px;
    display: flex;
    flex-direction: column;
}

.bed-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.room-type {
    color: #ff7670;
    flex-grow: 1;
}

.bedList {
    display: flex;
    flex-wrap: wrap;
}

.stuInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.collapse-main {
    background: #f8f8f8;
    border: 1px solid #dcdfe6;
    margin: 5px 0px;
}

.room-title-header {
    display: flex;
    background: #f8f8f8;
}
</style>